<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$websiteData['titles']}} - 列表页</title>
    <meta name="description" content="{{$websiteData['description']}}" />
    <meta name="keywords" content="{{$websiteData['keywords']}}" />
    <link rel="stylesheet" href="/static/home/css/website3/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="/static/home/sPage/jquery.sPage.css">
    <style>
        .spage-number button.active {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
            z-index: 3;
        }
        .spage-number button.active:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
    </style>
</head>

<body>
<!-- 头部导航 -->
@include("home.index3.header")

<!-- 列表页内容 -->
<main class="page-content">
    <div class="container">
        <div class="filter-bar">
            <div class="categories">
                <input type="hidden" value="{{$topicId}}" id="topicId">
                <span class="category @if($indexActive == 1) active @endif" attr-id="0">全部</span>
                @foreach($websiteColumnArr as $vals)
                <span class="category @if($indexActive == $vals['indexActive']) active @endif" attr-id="{{$vals['id']}}">{{$vals['titles']}}</span>
                @endforeach
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索文章..." id="article_title">
                <button id="searchData">搜索</button>
            </div>
        </div>

        <div class="list-posts-grid" id="content">

        </div>
        <div class="pagination">
            <div id="myPage" class="demo"></div>
        </div>
    </div>
</main>
<!-- 页脚 -->
@include("home.index3.footer")
<script src="/static/home/js/jquery.js"></script>
<script src="/static/home/sPage/jquery.sPage.min.js"></script>
<script>
    $(function () {
        ajaxPage(1);
        function ajaxPage(page) {
            var p = page || 1;
            var article_title = $("#article_title").val();
            var topicId = $("#topicId").val();
            $.ajax({
                type: "GET",
                url: "{{route('home.article.listData')}}",
                data: {
                    page: p,
                    pageSize: 12,
                    article_title:article_title,
                    topicId:topicId
                },
                dataType: "json",
                success: function(data) {
                    //数据处理
                    var _html="";
                    var articleData = data.data;
                    $.each(articleData,function (index,val) {
                      _html+='<article class="list-post-card">' +
                          '                <div class="list-post-image">' +
                          '                    <img src="'+val.thumb+'" alt="">' +
                          '                </div>' +
                          '                <div class="list-post-content">' +
                          '                    <span class="post-category">'+val.topicTitle+'</span>' +
                          '                    <h2 class="list-post-title"><a href="'+val.url+'&nvabar=3">'+val.title+'</a></h2>' +
                          '                    <p class="post-excerpt">'+val.brief+'</p>' +
                          '                    <div class="post-meta">' +
                          '                        <span>'+val.publish_time+'</span>' +
                          '                        <span>阅读 '+val.read_count+'</span>' +
                          '                    </div>' +
                          '                </div>' +
                          '            </article>';
                    });
                    $("#content").html(_html);
                    // ...
                    // 调用分页插件
                    $("#myPage").sPage({
                        page: p, //当前页码
                        pageSize: 12, //每页显示多少条数据，默认10条
                        total: data.total, //数据总条数,后台返回
                        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                        showTotal:true,//是否显示总条数，默认关闭：false
                        showSkip:true,//是否显示跳页，默认关闭：false
                        showPN:true,//是否显示上下翻页，默认开启：true
                        prevPage:"上一页",//上翻页文字描述，默认“上一页”
                        nextPage:"下一页",//下翻页文字描述，默认“下一页”
                        backFun: function(page) { //点击分页按钮回调函数，返回当前页码
                            ajaxPage(page);
                        }
                    });
                },
                error: function(e) {
                    console.log(e);
                }
            });
        };
        //点击搜素
        $("#searchData").click(function(){
            ajaxPage(1);
        });

        // 使用事件委托处理分类点击
        document.querySelector('.categories').addEventListener('click', function(e) {
            if (e.target.classList.contains('category')) {
                // 移除所有子元素的 active 类
                this.querySelectorAll('.category').forEach(category => {
                    category.classList.remove('active');
                });
                // 为当前点击的元素添加 active 类
                e.target.classList.add('active');
                // 获取当前元素的 attr-id 值
                const attrId = e.target.getAttribute('attr-id');
                $("#topicId").val(attrId);
                // 这里可以添加其他逻辑，比如根据分类ID加载对应内容
                ajaxPage(1);
            }
        });

    });
</script>
</body>
</html>
